<template>
  <el-header>
  	<div v-if="isAlertblack" 
  	@click="alertblack"
  	style="position:fixed;top:0;left:0;width:100%;height:100%;
  	background-color:rgba(0,0,0,0.5);padding:100px 10px;color:#fff;
  	font-weight:700;font-size:22px;z-index:110;line-height:20px;">
  		<p style="padding:20px 0;">本demo只开发了首页的商品展示，</p>
  		<p style="padding:20px 0;">下拉功能和筛选功能(点击关闭)</p>
  	</div>
  	<div class="position">
  		<i class="el-icon-location"></i>
  		<span>五象广场</span>
  		<i class="el-icon-caret-bottom" style="font-size:14px"></i>
  	</div>
  	<div :class="{searchbg:isShowclass}">
		<a class="search" href="javascript:void(0);">
			<i class="el-icon-search"></i>
			<span>搜索饿了么商家、商品名称</span>
		</a>  		
  	</div>
  </el-header>

</template>
<script>
export default{
	name:'HomeBanner',
	props: {
		list: Array,
		statustop: String,
	},
	data () {
		return {
			isShowclass:false,
			isAlertblack:true,
		}
	},
	methods: {
		showClass () {
			if (this.statustop === '1') {
				this.isShowclass = true			
			}else if (this.statustop === '0') {
				this.isShowclass = false
			}
		},
		acceptsearchcometop () {
	        let self=this
	        eventBus.$on('acceptsearchcome',function(){
	          self.isShowclass = true
	          //用完一次直接处理掉这个变量 eventBus.$off('acceptBook')
	        })
		},
		alertblack () {
			this.isAlertblack = false
		},
	},
	watch: {
		statustop (statustop) {
			this.showClass()
		}
	},
	mounted () {
		this.acceptsearchcometop()
	}
}
</script>
<style lang="stylus" scoped>
	.position
		padding:16px 0;
		color:#fff;
		font-size:20px;
		font-weight:700;
		padding-bottom:20px;
	.el-header
		height:auto!important;
		background: linear-gradient(to right, #0af , #0085ff);
		padding-bottom:10px;
	.search
		width:100%;
		line-height:40px;
		display: block;
		color:#666;
		text-align:center;
		background-color:#fff;
		z-index:99;
	.searchbg
		width:100%;
		padding:10px;
		text-align:center;
		position:absolute;
		top:0;
		background: linear-gradient(to right, #0af , #0085ff);	
		margin-left: -10px;	
		z-index:31;
</style>